<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="成绩考核" width="95%">
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane label="总体成绩" name="first">
        <div class="mod-demo-echarts">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card>
                <div id="K_chartBarBox" class="chart-box" />
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的成绩" name="second" v-if="roles==2">
        <div class="mod-demo-echarts">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card>
                <div id="L_chartBarBox" class="chart-box" />
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import echarts from 'echarts'
import { getScore } from '@/api/chart'
export default {
  data() {
    return {
      visible: false,
      chartBar: null,
      chartRadar:null,
      activeName2: 'first',
      scoreLists:[],
      barOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          show: true,
          right: '16%',
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['总分','课堂表现','作业情况','实验实践','出勤情况','其他','卷面成绩']
        },
        xAxis: [
          {
            type: 'category',
            data: [
              
            ],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '总分/卷面',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '表现分',
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: '{value}'
            }
          },
        ],
        series: [
          {
            name:'总分',
            type:'bar',
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            },
            data:[]
          },
          {
            name:'课堂表现',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'作业情况',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'实验实践',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'出勤情况',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'其他',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'卷面成绩',
            type:'bar',
            data:[]
          },
        ]
      },
      radarOption:{
          title: {
              text: '成绩雷达图'
          },
          tooltip: {},
          legend: {
              data: ['得分情况'],
              right:0
          },
          radar: {
              // shape: 'circle',
              name: {
                  textStyle: {
                      color: '#fff',
                      backgroundColor: '#999',
                      borderRadius: 3,
                      padding: [3, 5]
                }
              },
              indicator: [
                { name: '课堂表现', max: 6},
                { name: '作业情况', max: 6},
                { name: '实验实践', max: 6},
                { name: '出勤情况', max: 6},
                { name: '其他', max: 6},
                { name: '卷面成绩', max: 70}
              ]
          },
          series: [{
              name: '得分情况',
              type: 'radar',
              // areaStyle: {normal: {}},
              data : [
                  {
                      value : [2, 3, 4, 5, 6, 50],
                      name : '得分情况'
                  },
              ]
          }]
      }
    }
  },
  computed: {
    ...mapGetters(['roles', 'userId']),
  },
  methods: {
    init(row) {
      this.barOption= {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          show: true,
          right: '16%',
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['总分','课堂表现','作业情况','实验实践','出勤情况','其他','卷面成绩']
        },
        xAxis: [
          {
            type: 'category',
            data: [
              
            ],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '总分/卷面',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '表现分',
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: '{value}'
            }
          },
        ],
        series: [
          {
            name:'总分',
            type:'bar',
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            },
            data:[]
          },
          {
            name:'课堂表现',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'作业情况',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'实验实践',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'出勤情况',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'其他',
            type:'bar',
            yAxisIndex: 1,
            data:[]
          },
          {
            name:'卷面成绩',
            type:'bar',
            data:[]
          },
        ]
      },
      this.radarOption={
          title: {
              text: '成绩雷达图'
          },
          tooltip: {},
          legend: {
              data: ['得分情况'],
              right:0
          },
          radar: {
              // shape: 'circle',
              name: {
                  textStyle: {
                      color: '#fff',
                      backgroundColor: '#999',
                      borderRadius: 3,
                      padding: [3, 5]
                }
              },
              indicator: [
                { name: '课堂表现', max: 6},
                { name: '作业情况', max: 6},
                { name: '实验实践', max: 6},
                { name: '出勤情况', max: 6},
                { name: '其他', max: 6},
                { name: '卷面成绩', max: 70}
              ]
          },
          series: [{
              name: '得分情况',
              type: 'radar',
              // areaStyle: {normal: {}},
              data : [
                  {
                      value : [2, 3, 4, 5, 6, 50],
                      name : '得分情况'
                  },
              ]
          }]
      }
      this.visible = true
      this.getScore(row._id)
    },
    // 柱状图
    initChartBar() {
      this.chartBar = echarts.init(document.getElementById('K_chartBarBox'))
      this.chartBar.setOption(this.barOption)
    },
    initChartRadar(){
      this.chartRadar = echarts.init(document.getElementById('L_chartBarBox'))
      this.chartRadar.setOption(this.radarOption)
    },
    getScore(course) {
      getScore({
        course
      }).then(res => {
        if (res.code === 1) {
          let data1=[]
          let data2=this.barOption.series
          this.scoreLists=res.data.scoreLists
          res.data.scoreLists.forEach(item=>{
            data1.push(item.student.username)
            let score=Object.values(item.score)
            data2[0].data.push(this.sumArr(score))
            score.forEach((it,index)=>{
              data2[index+1].data.push(it)
            })
          })
          this.barOption.xAxis[0].data=data1
          this.barOption.series=data2
          this.initChartBar()
        }
      })
    },
    sumArr(arr){
      return arr.reduce(function(prev,cur){
        return prev + cur;
      },0);
    },
    handleClick(tab, event) {
        if(tab.name==="second"&&!this.chartRadar){
          this.$nextTick(()=>{
            this.radarOption.series[0].data[0].value=Object.values(this.scoreLists.filter((item)=>{
              return item.student._id===this.userId
            })[0].score)
            this.initChartRadar()
          })
        }
    }
  }
}
</script>
<style lang="scss">
.assessment-update .cell {
  padding: 0;
}
.mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      // min-height: 400px;
      width:100%;
      height: calc(100vh - 260px);
    }
  }
</style>

